<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue 3.0 表格数据展示</title>
    <!-- 引入Vue 3.0 CDN -->
    <script src="vue.global.js"></script>
    <!-- 引入外部CSS文件 -->
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="app">
        <div class="container">
            <h1>管理系统表格数据</h1>
            
            <div class="toolbar">
                <div class="search-bar">
                    <input 
                        type="text" 
                        v-model="searchQuery" 
                        class="search-input" 
                        placeholder="搜索..."
                        @input="handleSearch"
                    >
                    <div class="filter-group">
                        <label>状态筛选:</label>
                        <select v-model="statusFilter" class="select-control" @change="handleSearch">
                            <option value="">全部</option>
                            <option v-for="status in statusOptions" :key="status" :value="status">
                                {{ status }}
                            </option>
                        </select>
                    </div>
                    <div class="filter-group">
                        <label>每页显示:</label>
                        <select v-model="pageSize" @change="handlePageSizeChange" class="select-control">
                            <option v-for="size in pageSizes" :key="size" :value="size">{{ size }}</option>
                        </select>
                    </div>
                </div>
                <button class="btn btn-primary" @click="exportToCSV">导出CSV</button>
            </div>
            
            <div class="table-container">
                <table class="admin-table">
                <thead>
                    <tr>
                        <th style="width: 60px;">序号</th>
                        <th v-for="column in columns" :key="column.key" @click="sortBy(column.key)" :class="getSortClass(column.key)">
                            {{ column.label }}
                        </th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(item, index) in paginatedData" :key="index">
                        <td>{{ (currentPage - 1) * pageSize + index + 1 }}</td>
                        <td>{{ item.id }}</td>
                        <td>{{ item.name }}</td>
                        <td>{{ item.email }}</td>
                        <td>{{ item.date }}</td>
                        <td>
                            <span :class="['status', 'status-' + item.status.toLowerCase()]">
                                {{ item.status }}
                            </span>
                        </td>
                        <td>
                            <div class="action-buttons">
                                <button class="btn action-button" @click="editItem(item)">编辑</button>
                                <button class="btn btn-danger action-button" @click="confirmDelete(item)">删除</button>
                            </div>
                        </td>
                    </tr>
                </tbody>
                </table>
            </div>
            
            <div class="pagination">
                <button class="btn" @click="prevPage" :disabled="currentPage === 1">上一页</button>
                <button 
                    class="btn"
                    v-for="page in totalPages" 
                    :key="page" 
                    @click="goToPage(page)" 
                    :class="{ active: currentPage === page }"
                >
                    {{ page }}
                </button>
                <button class="btn" @click="nextPage" :disabled="currentPage === totalPages">下一页</button>
            </div>
        </div>

        <!-- 编辑对话框 -->
        <div class="modal" v-if="showEditModal">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title">编辑数据</h3>
                    <span class="modal-close" @click="closeEditModal">&times;</span>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label>姓名</label>
                        <input type="text" v-model="editingItem.name" class="form-control">
                    </div>
                    <div class="form-group">
                        <label>邮箱</label>
                        <input type="email" v-model="editingItem.email" class="form-control">
                    </div>
                    <div class="form-group">
                        <label>日期</label>
                        <input type="date" v-model="editingItem.date" class="form-control">
                    </div>
                    <div class="form-group">
                        <label>状态</label>
                        <select v-model="editingItem.status" class="form-control">
                            <option v-for="status in statusOptions" :key="status" :value="status">
                                {{ status }}
                            </option>
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn" @click="closeEditModal">取消</button>
                    <button class="btn btn-primary" @click="saveEdit">保存</button>
                </div>
            </div>
        </div>

        <!-- 删除确认对话框 -->
        <div class="modal" v-if="showDeleteModal">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title">确认删除</h3>
                    <span class="modal-close" @click="closeDeleteModal">&times;</span>
                </div>
                <div class="modal-body">
                    <p>确定要删除这条数据吗？此操作不可恢复。</p>
                </div>
                <div class="modal-footer">
                    <button class="btn" @click="closeDeleteModal">取消</button>
                    <button class="btn btn-danger" @click="confirmDeleteItem">确认删除</button>
                </div>
            </div>
        </div>

        <!-- 通知提示 -->
        <div :class="['notification', 'notification-' + notificationType, { show: showNotification }]">
            {{ notificationMessage }}
        </div>
    </div>

    <!-- 引入外部JavaScript文件 -->
    <script src="main.js"></script>
</body>
</html>